<script setup>
import {ElMessageBox} from 'element-plus'
import {Edit, Delete} from '@element-plus/icons-vue'
import MenuForm from './Form.vue'
import SettingMenuAPI from '@/api/setting/menu.js'
import {convertMenuToTree} from "@/views/setting/menu/common.js";

defineOptions({
  name: "SettingMenu",
  inheritAttrs: false,
})

onMounted(() => {
  getList()
})

const treeData = ref([])

const menuFormRef = ref()

const _ShowForm = (item) => {
  menuFormRef.value.open(item.id)
}

const _del = (item) => {
  ElMessageBox.confirm('是否删除！？', '提示', {type: 'warning',}).then(() => {
    console.log('11111')
  }).catch(() => {
    console.log(22222222)
  })
}

const __MenuFormClose = () => {
  getList()
}

const getList = () => {
  SettingMenuAPI.getList().then((res) => {
    treeData.value = convertMenuToTree(res)
  })
}
</script>

<template>
  <el-button type="primary" plain @click="menuFormRef.open()">新增</el-button>
  <div style="height: 10px;"></div>
  <el-table
      border
      :tree-props="{ children: 'children' }"
      :data="treeData"
      row-key="id"
      default-expand-all
  >
    <el-table-column label="菜单">
      <template #default="{ row }">
        {{ row.id }}.
        <el-icon v-if="row.icon">
          <component :is="row.icon"/>
        </el-icon>
        {{ row.title }}
        <el-tag v-if="row.type === 1" effect="dark">目录</el-tag>
        <el-tag v-else-if="row.type === 2" effect="dark" type="success">菜单</el-tag>
        <el-tag v-else-if="row.type === 3" effect="dark" type="danger">按键</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="路径">
      <template #default="{ row }">
        {{ row.pre_path }}{{ row.path }}
      </template>
    </el-table-column>
    <el-table-column label="组件">
      <template #default="{ row }">
        <div v-if="row.code">
          {{ row.code }}：{{ row.component }}
        </div>
      </template>
    </el-table-column>
    <el-table-column label="按键">
      <template #default="{ row }">
        <el-tag v-for="btn in row.btns" :key="btn.id" type="primary" style="margin-right: 2px">{{ btn.title }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="路由" width="70">
      <template #default="{ row }">
        <el-tag v-if="row.hidden === 0" type="success">显示</el-tag>
        <el-tag v-else-if="row.hidden === 1" type="info">隐藏</el-tag>
      </template>
    </el-table-column>
    <el-table-column align="center" prop="sort" label="排序" width="80"/>
    <!--点击操作-->
    <el-table-column fixed="right" align="center" width="150" label="操作" class-name="fixed-width">
      <template #default="{ row }">
        <el-button link type="primary" :icon="Edit" size="large" @click="_ShowForm(row)"/>
        <el-button link type="danger" :icon="Delete" size="large" @click="_del(row)"/>
      </template>
    </el-table-column>
  </el-table>
  <MenuForm ref="menuFormRef" @close="__MenuFormClose"/>
</template>

<style scoped>

</style>